<template>
  <div class="question-submit-history">
    <a-card title="我的提交历史" :bordered="false">
      <!-- 搜索栏 -->
      <div class="search-bar">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-select
              v-model="searchParams.language"
              placeholder="选择编程语言"
              allow-clear
              @change="handleSearch"
            >
              <a-option value="java">Java</a-option>
              <a-option value="cpp">C++</a-option>
              <a-option value="python">Python</a-option>
            </a-select>
          </a-col>
          <a-col :span="6">
            <a-select
              v-model="searchParams.status"
              placeholder="选择状态"
              allow-clear
              @change="handleSearch"
            >
              <a-option :value="0">待判题</a-option>
              <a-option :value="1">判题中</a-option>
              <a-option :value="2">成功</a-option>
              <a-option :value="3">失败</a-option>
            </a-select>
          </a-col>
          <a-col :span="8" style="display: flex; align-items: center">
            <a-button type="primary" @click="handleSearch">搜索</a-button>
            <a-button @click="handleReset" style="margin-left: 8px"
              >重置</a-button
            >
          </a-col>
        </a-row>
      </div>

      <!-- 提交记录表格 -->
      <a-table
        :columns="columns"
        :data="submitList"
        :loading="loading"
        :pagination="pagination"
        @page-change="handlePageChange"
        @page-size-change="handlePageSizeChange"
        row-key="id"
      >
        <template #status="{ record }">
          <a-tag :color="getStatusColor(record.status)">
            {{ getStatusText(record.status) }}
          </a-tag>
        </template>
        <template #language="{ record }">
          <a-tag>{{ record.language }}</a-tag>
        </template>
        <template #judgeInfo="{ record }">
          <div v-if="record.judgeInfo">
            <div>时间: {{ record.judgeInfo.time }}ms</div>
            <div>内存: {{ record.judgeInfo.memory }}MB</div>
            <div>
              通过: {{ record.judgeInfo.passedCount }}/{{
                record.judgeInfo.totalCount
              }}
            </div>
          </div>
        </template>
        <template #action="{ record }">
          <a-button type="text" @click="viewDetail(record)">查看详情</a-button>
        </template>
      </a-table>
    </a-card>

    <!-- 详情弹窗 -->
    <a-modal
      v-model:visible="detailVisible"
      title="提交详情"
      width="800px"
      :footer="false"
    >
      <div v-if="currentDetail">
        <a-descriptions title="基本信息" :column="2">
          <a-descriptions-item label="提交ID">{{
            currentDetail.id
          }}</a-descriptions-item>
          <a-descriptions-item label="编程语言">{{
            currentDetail.language
          }}</a-descriptions-item>
          <a-descriptions-item label="提交时间">{{
            formatTime(currentDetail.createTime)
          }}</a-descriptions-item>
          <a-descriptions-item label="状态">
            <a-tag :color="getStatusColor(currentDetail.status)">
              {{ getStatusText(currentDetail.status) }}
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>

        <a-divider />

        <a-descriptions title="评测信息" :column="1">
          <a-descriptions-item label="执行时间"
            >{{ currentDetail.judgeInfo?.time }}ms</a-descriptions-item
          >
          <a-descriptions-item label="内存消耗"
            >{{ currentDetail.judgeInfo?.memory }}MB</a-descriptions-item
          >
          <a-descriptions-item
            label="错误信息"
            v-if="currentDetail.judgeInfo?.message"
          >
            <a-alert :message="currentDetail.judgeInfo.message" type="error" />
          </a-descriptions-item>
        </a-descriptions>

        <a-divider />

        <!-- 代码展示 -->
        <div>
          <h3>提交代码</h3>
          <a-textarea
            v-model="currentDetail.code"
            :rows="10"
            readonly
            placeholder="代码内容"
          />
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { Message } from "@arco-design/web-vue";
import { QuestionControllerService } from "../../../generated";

// 响应式数据
const loading = ref(false);
const submitList = ref([]);
const detailVisible = ref(false);
const currentDetail = ref(null);

// 搜索参数
const searchParams = reactive({
  current: 1,
  pageSize: 10,
  language: undefined,
  status: undefined,
});

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: true,
});

// 表格列配置
const columns = [
  {
    title: "提交ID",
    dataIndex: "id",
    key: "id",
    width: 100,
  },
  {
    title: "编程语言",
    dataIndex: "language",
    key: "language",
    width: 100,
    slotName: "language",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
    width: 100,
    slotName: "status",
  },
  {
    title: "评测信息",
    dataIndex: "judgeInfo",
    key: "judgeInfo",
    width: 200,
    slotName: "judgeInfo",
  },
  {
    title: "提交时间",
    dataIndex: "createTime",
    key: "createTime",
    width: 180,
  },
  {
    title: "操作",
    key: "action",
    width: 100,
    slotName: "action",
  },
];

// 获取状态颜色
const getStatusColor = (status) => {
  const colorMap = {
    0: "orange",
    1: "blue",
    2: "green",
    3: "red",
  };
  return colorMap[status] || "default";
};

// 获取状态文本
const getStatusText = (status) => {
  const textMap = {
    0: "待判题",
    1: "判题中",
    2: "成功",
    3: "失败",
  };
  return textMap[status] || "未知";
};

// 格式化时间
const formatTime = (time) => {
  return new Date(time).toLocaleString();
};

// 加载提交列表
const loadSubmitList = async () => {
  loading.value = true;
  try {
    const res =
      await QuestionControllerService.listQuestionSubmitByPageUsingPost(
        searchParams
      );
    if (res.code === 0) {
      submitList.value = res.data.records;
      pagination.total = res.data.total;
      pagination.current = res.data.current;
      pagination.pageSize = res.data.size;
    } else {
      Message.error(res.message || "获取提交列表失败");
    }
  } catch (error) {
    Message.error("获取提交列表失败");
    console.error(error);
  } finally {
    loading.value = false;
  }
};

// 查看详情
const viewDetail = async (record) => {
  try {
    const res = await QuestionControllerService.getQuestionSubmitDetail(
      record.id
    );
    if (res.code === 0) {
      currentDetail.value = res.data;
      detailVisible.value = true;
    } else {
      Message.error(res.message || "获取详情失败");
    }
  } catch (error) {
    Message.error("获取详情失败");
    console.error(error);
  }
};

// 搜索
const handleSearch = () => {
  searchParams.current = 1;
  loadSubmitList();
};

// 重置
const handleReset = () => {
  searchParams.language = undefined;
  searchParams.status = undefined;
  searchParams.current = 1;
  loadSubmitList();
};

// 页码变化
const handlePageChange = (page) => {
  searchParams.current = page;
  pagination.current = page; // 同步更新
  loadSubmitList();
};

// 页大小变化
const handlePageSizeChange = (pageSize) => {
  searchParams.pageSize = pageSize;
  searchParams.current = 1;
  pagination.pageSize = pageSize; // 同步更新
  pagination.current = 1;
  loadSubmitList();
};

// 组件挂载时加载数据
onMounted(() => {
  loadSubmitList();
});
</script>

<style scoped>
.question-submit-history {
  padding: 20px;
}

.search-bar {
  margin-bottom: 16px;
}
</style>
